<template>
    <div class="productProNew">
        <div class="title"><h1><span>成员查看</span></h1></div>
        <div class="selectList">
            <ul >
                <!--<li>-->
                    <!--<label :for="'stroke'+$attrs.text">行程编号：</label>-->
                    <!--<input type="text" :id="'stroke'+$attrs.text" v-model="strokeNum">-->
                <!--</li>-->
                <li>
                    <label :for="'order'+$attrs.text">订单编号：</label>
                    <input type="text" :id="'order'+$attrs.text" v-model="billNum">
                </li>
                <li>
                    <label :for="'phone'+$attrs.text">手机号：</label>
                    <input type="text" maxlength="11" :id="'phone'+$attrs.text" v-model="cellPhone">
                </li>
                <li>
                    <button class="searchBtn" type="button" @click="inquire()">查询</button>
                </li>
                <li class="search-r">
                    <div class="MemberBtn fl download-box">
                      <span class="download-icon"></span>
                      <a href="static/images/template.xls" download="成员模版.xls">下载模版</a>
                    </div>
                    <button type="button" class="NewMember MemberBtn fl" @click="addNewMember()">新建</button>
                    <div class="Import MemberBtn fl">
                        <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" @change="Import($event)" />
                        <span>导入</span>
                    </div>
                    <!--<button type="button" class="deleteBtn MemberBtn fl" @click="Delrenyuan(member)">离团</button>-->
                    <!--<button type="button" class="deleteBtn MemberBtn fl" @click="Delrenyuan(member)">如团</button>-->
                    <button type="button" class="modificationBtn MemberBtn fl" @click="editMember(member)">编辑</button>
                    <button type="button" class="deleteBtn MemberBtn fl" @click="Delrenyuan(member)">删除</button>
                </li>
            </ul>
        </div>
        <!--游客列表-->
        <div class="MemberBox clearfix" v-show="listBox">
            <table class="table MemberTab fl">
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>手机号</th>
                    <th>是否离团</th>
                    <th>是否退出行程</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(val,index) in personnel" :class="{cur:iscur==index}" @click="iscur=index,tabChange(val)">
                    <td>{{val.name}}</td>
                    <td>{{val.gender}}</td>
                    <td>{{val.mobile}}</td>
                    <td>{{val.isActive ? '否' : '是'}}</td>
                    <td>{{val.status ? '是' : '否'}}</td>
                    <td>
                      <a href="javascript:;" @click="changeTuanStatus(val)">{{val.isActive ? '离团' : '入团'}}</a>
                      <a href="javascript:;" @click="changeStrokeStatus(val)">{{val.status ? '加入行程' : '退出行程'}}</a>
                    </td>
                </tr>
            </table>
            <dl class="Member-details fr">
                <dt>详细信息</dt>
                <div class="MemberDetails">
                  <dd>姓名: <div>{{MemberDetails.name || '未设置'}}</div></dd>
                  <dd>性别: <div>{{MemberDetails.gender || '未设置'}}</div></dd>
                  <dd>手机号: <div>{{MemberDetails.mobile || '未设置'}}</div></dd>
                  <dd>出生日期: <div>{{MemberDetails.birthday || '未设置'}}</div></dd>
                  <dd>英文名: <div>{{MemberDetails.firstName || '未设置'}}</div></dd>
                  <dd>英文姓: <div>{{MemberDetails.lastName || '未设置'}}</div></dd>
                  <dd>证件信息:
                      <div>
                          <span v-if="MemberDetails.sfid!='' & MemberDetails.sfid!= null" class="credentials">身份证号：{{MemberDetails.sfid}}</span>
                          <span v-if="MemberDetails.hzid!='' & MemberDetails.hzid!= null" class="credentials">护照号：{{MemberDetails.hzid}}</span>
                          <span v-if="MemberDetails.gaid!='' & MemberDetails.gaid!= null" class="credentials">港澳通行证号：{{MemberDetails.gaid}}</span>
                          <span v-if="MemberDetails.twid!='' & MemberDetails.twid!= null" class="credentials">台湾通行证号：{{MemberDetails.twid}}</span>
                          <span v-if="MemberDetails.qtid!='' & MemberDetails.qtid!= null" class="credentials">其他证件号：{{MemberDetails.qtid}}</span>
                      </div>
                  </dd>
                  <dd>游客备注: <div>{{MemberDetails.descrip || '未设置'}}</div></dd>
                  <dd>管理员说明: <div>{{MemberDetails.remark || '未设置'}}</div></dd>

                </div>
            </dl>
        </div>
        <div class="NoData" v-show="NoData">
            对不起，没有数据
        </div>
        <FootPage :Pieces="pieces" :PiecePage="pageNum" :Page="pages" v-on:current-page="currentPage"></FootPage>
    </div>
</template>
<script>
    import FootPage from '@/components/public/footpage'
    export default{
        data(){
            return{
                // 数据控制显示模块
                NoData:false, // 没有数据的时候的模块 默认隐藏
                listBox:true, // 数据列表模块 默认显示
                btnShow:false,
                Http:'',// 数据接口连接
                UploadRenyuanHttp:'',
                DelRenyuanHttp:'',
                RenyuanViewHttp:'',
                // 禁止查询频繁操作
                trigger:true,
                triggerTime:'',
                iscur:-1,
                // present:'',
                pieces:'',//数据总数
                pageNum:20,//每页数据条数
                pages:'1',//当前页码
                strokeNum:'',
                billNum:'',//订单编号：
                cellPhone:'',//手机号：
                personnel:'', //成员名单
                MemberDetails:{},
                member: {},
                statusHttp: ''
            }
        },
        computed:{
            NEW_STROKE_TAB() {//方法  行程子新建
                return this.$store.state.stroke.NEW_STROKE_TAB;
            },
            RenyuanList(){ //人员列表
                return this.$store.state.interface.wbXchRenyuanList;
            },
            UploadRenyuan(){ //人员导入
                return this.$store.state.interface.UploadRenyuan;
            },
            DelRenyuan(){ //人员删除
                return this.$store.state.interface.DelRenyuan;
            },
            RenyuanView(){ //成员详情
                return this.$store.state.interface.xchRenyuanView;
            },
            renyuanStatus () {
              return this.$store.state.interface.renyuanStatus;
            }
        },
        methods:{
            changeStrokeStatus (val) {
              let self = this;
              let rid = val.rid;
              let status = val.status;
              let formData =new FormData();
              formData.append('rid', rid);
              if (status) {
                layer.confirm('是否加入行程？', {
                  btn: ['是','否'] //按钮
                }, function(){
                  formData.append('status', 0);
                  layer.load(2);
                  self.$ajax.post(self.statusHttp,formData).then(function(res) {
                    layer.closeAll('loading');
                    if(res.data.code === '10000' ){
                      layer.msg('加入成功!');
                      self.port();
                      $('.layui-layer-shade, .layui-layer').hide();
                    }else{
                      layer.msg('加入失败!');
                      $('.layui-layer-shade, .layui-layer').hide();
                    }
                  },function(res){
                    layer.closeAll('loading');
                    layer.msg('服务器错误!');
                  })
                })
              } else {
                layer.confirm('是否退出行程？', {
                  btn: ['是','否'] //按钮
                }, function() {
                  formData.append('status', 1);
                  layer.load(2);
                  self.$ajax.post(self.statusHttp, formData).then(function (res) {
                    layer.closeAll('loading');
                    if(res.data.code === '10000' ){
                      layer.msg('退出成功!');
                      self.port();
                      $('.layui-layer-shade, .layui-layer').hide();
                    }else{
                      layer.msg('退出失败!');
                      $('.layui-layer-shade, .layui-layer').hide();
                    }
                  }, function (res) {
                    layer.closeAll('loading');
                    layer.msg('服务器错误!');
                  })
                })
              }
            },
            changeTuanStatus (val) {
              let self = this;
              let rid = val.rid;
              let isActive = val.isActive;
              let formData = new FormData();
              formData.append('rid', rid);
              if (isActive) {
                layer.confirm('是否要离团？', {
                  btn: ['是','否'] //按钮
                }, function(){
                  formData.append('isActive', 0);
                  layer.load(2);
                  self.$ajax.post(self.statusHttp,formData).then(function(res) {
                    layer.closeAll('loading');
                    if(res.data.code === '10000' ){
                      layer.msg('删除成功!');
                      self.port();
                      $('.layui-layer-shade, .layui-layer').hide();
                    }else{
                      layer.msg('离团失败!');
                      $('.layui-layer-shade, .layui-layer').hide();
                    }
                  },function(res){
                    layer.closeAll('loading');
                    layer.msg('服务器错误!');
                  })
                })
              } else {
                layer.confirm('是否要入团？', {
                  btn: ['是','否'] //按钮
                }, function(){
                  formData.append('isActive', 1);
                  layer.load(2);
                  self.$ajax.post(self.statusHttp,formData).then(function(res) {
                    layer.closeAll('loading');
                    if(res.data.code === '10000' ){
                      layer.msg('入团成功!');
                      self.port();
                      $('.layui-layer-shade, .layui-layer').hide();
                    }else{
                      layer.msg('入团失败!');
                      $('.layui-layer-shade, .layui-layer').hide();
                    }
                  },function(res){
                    layer.closeAll('loading');
                    layer.msg('服务器错误!');
                  })
                })
              }
            },
            addNewMember(){//新建成员
              this.$store.commit('NEW_STROKE_TAB',{
                  title:'新建成员',
                  components:'StrokeProMembersNew',
                  dataId:this.$attrs.proid,
                  dataSn:this.$attrs.proSn,
              });
            },
            editMember(val){
                if (val.rid) {
                  this.$store.commit('NEW_STROKE_TAB',{
                    title:'编辑成员',
                    components:'StrokeProMembersEdit',
                    dataId:val.rid,
                  });
                } else {
                  layer.msg('请选择成员!');
                }
            },
            inquire(){//查询
                let self = this;
                if(self.trigger==true){
                    self.trigger=false;
                    self.port(); //获取对应的数据
                    self.triggerTime=setTimeout(function(){
                        self.trigger=true;
                    },1500)
                }
            },
            currentPage: function(msg){ //分页
                this.pages = msg;
                this.port(); //获取对应页码数据
            },
            tabChange(val){ //成员详情
                let self = this;
                self.MemberDetails=val;
                self.member = val;
            },
            Delrenyuan(val){
                let self = this;
                let formData =new FormData(); // 基础信息表单数据
                if (val.rid) {
                  formData.append('id', self.MemberDetails.rid);
                  layer.confirm(`确定要删除${self.MemberDetails.name}吗？`, {
                    btn: ['确定','取消'] //按钮
                  }, function(){
                    layer.load(2);
                    self.$ajax.post(self.DelRenyuanHttp,formData).then(function(res) {
                      layer.closeAll('loading');
                      if(res.data.code === '10000' ){
                        layer.msg('删除成功!');
                        self.port();
                        self.MemberDetails={};
                        self.member = {};
                        self.iscur=-1;
                      }else{
                        layer.msg('删除失败!');
                      }
                    },function(res){
                      layer.closeAll('loading');
                      layer.msg('服务器错误!');
                    })
                  })
                } else {
                  layer.msg('请选择成员!');
                }

            },
            Import(e){ //导入人员
                let self = this;
                let file = e.target.files[0];
                let formData =new FormData(); // 基础信息表单数据
                formData.append('xid', this.$attrs.proid);
                formData.append('file', file);
                formData.append('app', 'liexing');
                formData.append('platform', 'web');
                formData.append('ver', '3');
                let config = {
                      headers: {
                        'Content-Type': 'multipart/form-data'
                      }
                }
                if(file!=''){
                    layer.load(2);
                    self.$ajax.post(self.UploadRenyuanHttp,formData,config).then(function(res) {
                        layer.closeAll('loading');
                        if(res.data.code === '10000' ){
                            layer.msg('上传成功!');
                        }else{
                            layer.msg('上传失败，请检查表格格式是否正确!');
                        }
                    },function(res){
                        layer.closeAll('loading');
                        layer.msg('服务器错误!');
                    })
                }


            },
            port(){
                let self = this;
                layer.load(2);
                let formData =new FormData(); // 基础信息表单数据
                formData.append('pageId', this.pages);
                formData.append('size', this.pageNum);
                formData.append('xid', this.$attrs.proid);
                formData.append('orderSn', this.billNum);
                formData.append('mobile', this.cellPhone);

                self.$ajax.post(self.Http,formData).then(function(res) {
                    layer.closeAll('loading');
                    self.MemberDetails="";
                    self.iscur=-1;
                    self.btnShow=false;
                    if(res.data.code === '10000' ){
                        let ShowList = res.data.result;
                        for(let i in ShowList){
                            self.personnel = ShowList[i];
                            self.MemberDetails = self.personnel[0];
                        };
                        self.pieces=res.data.amount;
                        // 显示列表模块
                        self.NoData= false;
                        self.listBox= true;
                    }else{
                        // 没有数据或者数据错误
                        self.NoData=true;
                        self.listBox=false;
                        self.pieces=0;
                        self.codes(res.data.code);
                    }
                },function(res){
                    layer.closeAll('loading');
                    self.pieces=0;
                    layer.msg('服务器错误!');
                })

            },
        },
        beforeMount(){
            let self = this;
            let url = self.RenyuanList;
            let sessionId = JSON.parse(sessionStorage.getItem('customer')).sid;
            self.Http = `${url}?sid=${sessionId}`; // 基础信息
            self.UploadRenyuanHttp = `${self.UploadRenyuan}?sid=${sessionId}`; // 成员导入
            self.DelRenyuanHttp = `${self.DelRenyuan}?sid=${sessionId}`; // 成员删除
            self.RenyuanViewHttp= `${self.RenyuanView}?sid=${sessionId}`; // 成员详情
            self.statusHttp = `${self.renyuanStatus}?sid=${sessionId}`;
            // 行程成员名单
            this.port();
        },
        mounted(){},
        components:{
            FootPage,
        }
    }
</script>
<style lang="scss" scoped>
    .selectList{
        li{
            .MemberBtn{
                background: none;
                color: #09ba79;
                font-size: 14px;
                padding-left: 22px;
                background-position: 0 center;
                background-repeat: no-repeat;
                margin: 0 10px;
            }
            .NewMember{
                background-image:url('../../assets/images/search_xinjian_btn2.png');
            }
            .Import{
                position: relative;
                border: none;
                height: 34px;
                padding: 0;
                cursor: pointer;
                background-image:url('../../assets/images/Import2.png');
                input{
                    position: absolute;
                    opacity: 0;
                    width: 100%;
                    height: 100%;
                    cursor: pointer;
                }
                span{
                    padding: 0 10px 0 22px;
                    cursor: pointer;
                    color: #09ba79;
                    font-size: 14px;
                    height: 34px;
                    line-height: 34px;
                }
            }
            .modificationBtn{
                background-image:url('../../assets/images/modification2.png');
            }
            .deleteBtn{
                background-image:url('../../assets/images/delete2.png');
            }
        }
    }
    .MemberTab{
        width: 70%;
        border: 1px solid #ddd;
        tr{
            th{
                /*text-align: left;*/
                height: 46px;
                padding: 0 15px;
                background-color: #f7f7f7;
                border: 1px solid #ddd;
            }
            td{
                border: 1px solid #ddd;
                padding: 0 15px;
                height: 40px;text-align: center;
            }
            &:hover,&.cur{
                background-color: #f7f7f7;
            }
        }

    }
    .Member-details{
        position: relative;
        width: 30%;
        left: -1px;
        margin-top: 0;
        dt{
            height: 46px;
            line-height: 46px;
            color: #fff;
            padding: 0 15px;
            background-color: #09ba79;
            border: 1px solid #09ba79;
        }
        .MemberDetails{
            border: 1px solid #ddd;
            border-top: 0;
            padding: 10px 0;
            background-color: #fff;
            dd{
                margin: 0;
                padding: 5px 15px;
                line-height: 20px;
                div{
                    display: inline-block;
                }
            }
        }

    }
  td a{
    color: #09ba79;margin-right: 6px;
  }
    td a:last-child{margin-right: 0;}
    .selectList li .MemberBtn.download-box{margin-top: 8px;}
    .download-icon{
      display: inline-block;
      width: 15px;height: 15px;
      background: url() no-repeat;
      background-size: 100% 100%;
  }
</style>
